<template>
  <div v-infinite-scroll="load" :infinite-scroll-disabled="!moreAlbums">
    <el-affix :offset="0">
      <div class="top">
        <BackTo class="backto" :size="30" />
        <span class="tulin tulin-Plus" @click="dialogTableVisible1=!dialogTableVisible1"></span>
        <div class="col-width"></div>
      </div>
    </el-affix>
    <MyEmpty v-show="albumList.length==0" :description="'快点我添加相册吧'"
      @click="dialogTableVisible1=!dialogTableVisible1" />
    <!-- -------------------相册集合----------------------------- -->
    <div class="content">
      <el-row :gutter="5">
        <el-col :xs="12" :sm="6" :md="6" :lg="4" :xl="3" v-for="album in albumList" :key="album">
          <el-card class="card" :body-style="{ padding: '0px' }" @click="showPhoto(album.id)">
            <el-tag class="card-tip" v-show="album.permission==2">共享</el-tag>
            <el-tag class="card-tip" type="warning" v-show="album.permission==1">全部可见</el-tag>
            <el-image :src="album.image" class="image" fit="cover">
              <template #error>
                <div class="el-image-error">
                  快添加图片吧
                </div>
              </template>
            </el-image>
            <div style="padding: 10px">
              <span>{{album.name}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 创建相册 -->
    <el-dialog v-model="dialogTableVisible1" title="新建相册" :center="true" :show-close="false">
      <el-input type="text" v-model="name" placeholder="相册名称(0-10字符)" size="large" maxlength="20" />
      <div style="height:20px"></div>
      <el-input type="text" v-model="remark" placeholder="备注" size="large" maxlength="255" />
      <el-radio-group v-model="permissionSelect" class="ml-4">
        <el-radio :label="0" size="large">私有</el-radio>
        <el-radio :label="1" size="large">共享</el-radio>
      </el-radio-group>
      <div v-if="permissionSelect==1">
        <!-- 共享方式下拉框 -->
        <el-select v-model="shareType" size="large" placeholder="Select">
          <el-option value="1" label="全部可见" />
          <el-option value="2" label="链接分享" />
        </el-select>
      </div>
      <div v-if="shareType=='2'&&permissionSelect==1">
        <div style="height:20px"></div>
        <el-input type="text" v-model="code" placeholder="四位共享密码" size="large" maxlength="4" />
        <el-radio-group v-model="expireTime" class="ml-4">
          <el-radio :label="7" size="large">7天</el-radio>
          <el-radio :label="30" size="large">30天</el-radio>
          <el-radio :label="-1" size="large">永久</el-radio>
        </el-radio-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible1 = !dialogTableVisible1">取消</el-button>
          <el-button type="primary" @click="createAlbum">创建</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 创建相册 -->
    <el-dialog v-model="dialogTableVisible2" title="复制给好友分享吧" :center="true" :show-close="false">
      <div class="shareLink">{{shareLink}}&nbsp;
        <el-icon @click="copyShareLink">
          <CopyDocument />
        </el-icon>
      </div>
      <input id="shareLink" type="text" value="111" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible2 = !dialogTableVisible2">取消</el-button>
          <el-button type="primary" @click="copyShareLink">复制链接</el-button>
        </span>
      </template>
    </el-dialog>
    <div v-loading="loading"></div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import { copyText } from "../../utils/index";
import BackTo from '../../components/BackTo.vue'
export default {
  name: 'GAlbum',
  data () {
    return {
      moreAlbums: true,
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      name: "",
      remark: "",
      albumList: [],
      pageNum: 1,
      loading: false,
      permissionSelect: 0,
      permission: 0,
      shareType: '1',
      expireTime: 30,
      code: null,
      shareLink: "",
    }
  },
  components: {
    BackTo,
  },
  unmounted () {
    console.log("销毁了");
  },
  mounted () {
    this.getAlbums(this.pageNum++, 5);
    this.updateUserConfig();
  },

  methods: {
    //新建相册
    createAlbum () {
      const that = this;
      //创建私有相册
      if (this.permissionSelect == 0) {
        this.permission = 0;
        this.$axios.post('/album', {
          "name": this.name,
          "permission": this.permission,
          "remark": this.remark
        }).then((res) => {
          console.log(res);
          if (res.flag) {
            that.albumList.unshift({
              id: res.data.id,
              image: "",
              name: res.data.name,
              url: "",
            })
            ElMessage({
              message: res.msg,
              grouping: true,
              type: 'success',
              duration: 2000,
            })
            this.dialogTableVisible1 = false;
          }
        })
        return;
      }
      //创建共享相册
      if (this.permissionSelect == 1) {
        this.permission = this.shareType;
        this.$axios.post('/album/share/addalbum', {
          "album": {
            "permission": this.permission,
            "name": this.name,
            "remark": this.remark
          },
          "expireTime": this.expireTime,
          "code": this.code,
        }).then((res) => {
          console.log(res);
          if (res.flag) {
            that.albumList.unshift({
              id: res.data.album.id,
              image: "",
              name: res.data.album.name,
              url: "",
            })
            ElMessage({
              message: res.msg,
              grouping: true,
              type: 'success',
              duration: 2000,
            })
            this.dialogTableVisible1 = false;
            if (this.permission == 2) {
              this.shareLink = window.location.host + "/#/addshareuser/" + res.data.album.id;
            }
            if (this.permission == 1) {
              this.shareLink = window.location.host + "/#/photo/" + res.data.album.id;
            }
            this.dialogTableVisible2 = true;
          }
        })
        return;
      }
    },
    //获取相册
    getAlbums (pageNum, pageSize) {
      this.loading = true;
      this.$axios.get("/album/" + pageNum + "/" + pageSize + "").then((res) => {
        if (res.flag) {
          console.log("Album.vue->getAlbums", res);
          if (res.data.length < 1) {
            this.moreAlbums = false
          } else {
            for (var key in res.data) {
              this.albumList.push(res.data[key]);
            }
          }
        }
        this.loading = false;
      })
    },
    load () {
      this.getAlbums(this.pageNum++, 5);
    },
    showPhoto (albumId) {
      this.$router.push({
        name: 'photo', params: { "albumId": albumId }
      }
      );
    },
    copyShareLink () {
      var content = document.getElementById('shareLink');
      copyText(content, this.shareLink);
    },
    //更新用户配置
    updateUserConfig () {
      this.$axios.put("/userConfig").then(res => {
        console.log(res);
      })
    }
  }
}
</script>

<style scoped>
.top {
  width: 100%;
  text-align: right;
  background-color: var(--primary);
}
.backto {
  position: absolute;
  left: 5px;
}
/* 解决getter 超出出现滚动条 */
.content {
  overflow-x: hidden;
  padding: 0 5px;
  box-sizing: border-box;
}
.card {
  position: relative;
  margin-top: 5px;
  padding: 5px;
  text-align: center;
}
.card-tip {
  position: absolute;
  z-index: 10;
  top: 10px;
  right: 10px;
  font-weight: bold;
}
.image {
  height: 150px;
  width: 100%;
}
.el-image-error {
  height: 100%;
  line-height: 150px;
  color: gray;
}
.shareLink {
  word-wrap: break-word;
}
#shareLink {
  position: fixed;
  left: 10000px;
}
</style>